<template>
  <view class="container">
    <view class="verticalBox">
      <scroll-view class="verticalNav" scroll-y scroll-with-animation style="width: 200rpx">
        <view class="verticalNav-item" :class="index == tabCur ? 'active' : ''" v-for="(item, index) in list" :key="index" @click="tabSelect" :data-id="index">
          {{ item.title }}
          <view class="before"></view>
        </view>
      </scroll-view>
      <scroll-view class="verticalMain" scroll-y scroll-with-animation :scroll-into-view="'main-' + mainCur" @scroll="verticalMain">
        <view class="list" v-for="(item, index) in list" :key="index" :id="'main-' + index">
          <view class="list-title">
            {{ item.title }}
          </view>
          <view class="list-item flexBetween" v-for="(y, i) in item.data" :key="i" @click="select(y)">
            <view class="left">
              <view class="name">{{ y.name }}</view>
              <view class="type">{{ y.type }}</view>
            </view>
            <view class="right">
              <uni-icons type="right" size="20" color="#999"></uni-icons>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { getDubbingArtist } from '@/api/common.js'
export default {
  data() {
    return {
      index: 0,
      tabCur: 0,
      mainCur: 0,
      load: true,
      list: []
    }
  },
  onLoad() {
    this.getDubbingArtist()
  },
  methods: {
    // 更新上页面数据
    renew(item) {
      // 获取当前页面栈实例（此时最后一个元素为当前页）
      let pages = getCurrentPages()
      //  上一页面实例
      let prevPage = pages[pages.length - 2]
      // 给上一页面实例绑定方法和参数（注意是$vm）
      prevPage.$vm.renewInfo(item)
      // 返回上一页面
      uni.navigateBack({
        delta: 1 // 返回的页面数
      })
    },
    // 选择
    select(item) {
      this.renew(item)
    },
    // 获取配音员
    getDubbingArtist() {
      getDubbingArtist().then((res) => {
        this.list = res.data
        if (this.list.length && this.list.length > 0) {
        }
      })
    },
    // 左侧导航栏切换
    tabSelect(e) {
      this.yabCur = e.currentTarget.dataset.id
      this.mainCur = e.currentTarget.dataset.id
    },
    // 右侧导航滚动事件
    verticalMain(e) {
      let list = this.list
      let tabHeight = 0
      this.load = true
      if (this.load) {
        for (let i = 0; i < list.length; i++) {
          let view = uni.createSelectorQuery().select('#main-' + i)
          view
            .fields(
              {
                size: true
              },
              (data) => {
                list[i].top = tabHeight
                tabHeight = tabHeight + data.height
                list[i].bottom = tabHeight
              }
            )
            .exec()
        }
        this.load = false
        this.list = list
      }
      let scrollTop = e.detail.scrollTop + 30
      for (let i = 0; i < list.length; i++) {
        if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
          this.tabCur = i
          return false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  .verticalBox {
    display: flex;
    height: 100vh;
    .verticalNav {
      height: 100%;
      padding-bottom: env(safe-area-inset-bottom);
      .verticalNav-item {
        height: 100rpx;
        line-height: 100rpx;
        text-align: center;
        position: relative;
        &.active {
          background: #fff;
        }
        &.active .before {
          display: block;
          position: absolute;
          left: 0;
          top: 0;
          width: 8rpx;
          height: 100%;
          background: red;
          // border-left: 8rpx solid red;
        }
      }
    }
    .verticalMain {
      height: 100%;
      padding-bottom: env(safe-area-inset-bottom);
      flex: 1;
      background: #fff;
      .list {
        padding: 0 20rpx;
        .list-title {
          font-weight: 600;
          height: 100rpx;
          line-height: 100rpx;
          font-size: 36rpx;
        }
        .list-item {
          height: 100rpx;
          .left {
            .name {
              font-size: 32rpx;
            }
            .type {
              color: #999;
              margin-top: 5rpx;
            }
          }
        }
      }
      .list:last-child {
        min-height: calc(100vh - env(safe-area-inset-bottom));
      }
    }
  }
}
</style>
